<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="FR" lang="FR">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache, must-revalidate">
  <title><%= @html_newsletter.subject %></title>

	<style type="text/css">
		
		body {
		  background-color: #ffffff;
			text-align:left;
		}

		a img {
		   border: none;
		}

		table.bg1 {
		   background-color: #ffffff;
		}

		table.bg2 {
		   background-color: #ffffff;
		}
		
		table {
			text-align:left;
		}

		td.permission {
		   background-color: #ffffff;
		   padding: 5px 20px 5px 20px;
		}

		td.permission p {
		   font-family: helvetica,verdana,arial,sans-serif;
		   line-height:1.5em;
		   font-size: 11px;
		   font-weight: normal;
		   color: #333333;
		   margin: 0;
		   padding: 0;
		}
		td.permission p.de {
			color:#CA001C;
		}
		

		td.permission p a {
		   font-family: helvetica,verdana,arial,sans-serif;
		   line-height:1.5em;
		   font-size: 11px;
		   font-weight: normal;
		   color: #333333;
		}

		td.header img {
			margin: 10px 0;
		}

		td.body {
		   padding: 0 20px 20px 20px;
		   background-color: #ffffff;
		}

		td.sidebar img {
			margin:0;
			padding:0;
		}

		td.buttons {
		  padding: 20px 0 0 0; 
		}

		td.mainbar h1 {
			font-family: helvetica,verdana,arial,sans-serif;
			line-height:1.5em;
	   	font-size: 24px;
	   	font-weight: bold;
	   	margin: 1em 0 0.6em 0;
	   	padding: 0;
		}
		td.mainbar h1 a {
			font-family: helvetica,verdana,arial,sans-serif;
			line-height:1.5em;
	   	font-size: 24px;
	   	font-weight: bold;
	   	margin: 1em 0 0.6em 0;
	   	padding: 0;
		  color: #333333;
		  text-decoration: none;
		}
		td.mainbar h1 a:hover {
			color: #3C77B9;
		}
		
		td.mainbar h2 {
		  font-family: helvetica,verdana,arial,sans-serif;
		  line-height:1.5em;
		  font-size: 16px;
		  font-weight: bold;
			color: #333333;
		  margin: 1em 0 0.6em 0;
		  padding: 0;
		}

    td.mainbar a {
		  font-family: helvetica,verdana,arial,sans-serif;
		  color: #333333;
		  text-decoration: none;
		}
    td.mainbar a:hover {
			color: #3C77B9;
		}

		td.mainbar h2 a {
		  font-family: helvetica,verdana,arial,sans-serif;
		  line-height:1.5em;
		  font-size: 16px;
		  font-weight: bold;
		  color: #333333;
		  text-decoration: none;
			margin: 1em 0 0.8em 0;
		  padding: 0;
		}
		td.mainbar h2 a:hover {
			color: #3C77B9;
		}
		
		td.mainbar img.hr {
		   margin: 0;
		   padding: 0 0 10px 0;
		}

		td.mainbar, td.mainbar p {
		   font-family: helvetica,verdana,arial,sans-serif;
		   line-height:1.5em;
		   font-size: 13px;
		   font-weight: normal;
		   color: #333333;
		   margin: 0 0 14px 0;
		   padding: 0;
		}
		td.mainbar .de, td.mainbar p.de {
			color:#C6001C;
		}

		td.mainbar p a {
		   font-family: helvetica,verdana,arial,sans-serif;
		   line-height:1.5em;
		   font-size: 13px;
		   font-weight: normal;
		   color: #3333FF;
		}

		td.mainbar p.more a {
		   font-family: helvetica,verdana,arial,sans-serif;
		   line-height:1.5em;
		   font-size: 13px;
		   font-weight: normal;
		   color: #3333FF;
		   text-decoration: none;
		}

		td.mainbar ul {
		  margin: 8px 0 0 20px;
		  padding: 0;
		}

		td.mainbar ul li {
			font-family: helvetica,verdana,arial,sans-serif;
			line-height:1.5em;
			font-size: 13px;
		  font-weight: normal;
		  color: #333333;
			margin:8px 0;
		}

		td.mainbar ul li a, td.mainbar a {
		   font-family: helvetica,verdana,arial,sans-serif;
		   line-height:1.5em;
		   font-size: 13px;
		   font-weight: normal;
		   color: #3C77B9;
		   text-decoration:none;
		}
		td.mainbar ul li a:hover, td.mainbar a:hover {
		  color: #BF0000;
		  text-decoration:none;
	  }

		td.footer {
		   padding: 0 20px 0 20px;
		   background-image: url('footer-bg.gif');
		   background-repeat: no-repeat;
		   background-position: top center;
		   background-color: #ffffff;
		   height: 61px;
		   vertical-align: middle;
		}

		td.footer p {
		   font-family: helvetica,verdana,arial,sans-serif;
		   line-height:1.5em;
		   font-size: 11px;
		   font-weight: normal;
		   color: #ffffff;
		   line-height: 16px;
		   margin: 0;
		   padding: 0;
		}

		td.mainbar p.forum, td.mainbar p.forum a {
			font-size:10.5px;
			font-style:italic;
		}
		
		.de {color:#C6001C;}
		.clear {clear:both;line-height:0.1px;}
		
		tfoot tr td.permission {
			margin-top: 20px;
			padding-top: 10px;
			border-top:solid 1px #AAA;
		}
		
	</style>


</head>
<body>
	<table width="100%" border="0" cellspacing="0" cellpadding="0" class="bg1">
		<tr>
	  	<td align="center">
        <table width="600" border="0" cellspacing="0" cellpadding="0" class="bg2">
        	<tr>
          	<td class="permission" align="left">
            	<p>Vous n'arrivez pas à lire cet email? <webversion>Lisez le dans votre navigateur web</webversion>.</p>
            </td>
					</tr>
          <tr>
          	<td class="header" align="center">
            	<img src="/images/newsletter_logo.jpg" alt="Connexion Française" width="610" height="92" />
            </td>
          </tr>
          <tr>
          	<td valign="top" class="body mainbar">
							<%= yield %>
						</td>
					</tr>
					<tr>
					  <td valign="top" class="body mainbar" style="padding-top:10px;">
					    <table width="610" valign="top" class="body mainbar">
              <tr valign="middle">

              <td width="30" align="right"><a href="http://www.facebook.com/group.php?gid=7863495811" style="text-decoration:none;"><img src="/images/facebook.png" style="margin-top:3px;"></a></td>
              <td width="3" />
              <td width="222"><a href="http://www.facebook.com/group.php?gid=7863495811">rejoignez-nous sur Facebook</a></td>

              <td width="50" align="right"><a href="http://forum.connexion-francaise.com" style="text-decoration:none;"><img src="/images/picto_forum.jpg" style="margin-top:3px;" width="32" height="32"></a></td>
              <td width="3" />
              <td width="202"><a href="http://forum.connexion-francaise.com">participez à nos forums de discussions</a></td>

              </tr>
              <tr valign="middle">
              <td width="30" align="right"><a href="http://twitter.com/connexionfr" style="text-decoration:none;"><img src="/images/twitter.png" style="margin-top:3px;"></a></td>
              <td width="3" />
              <td width="222"><a href="http://twitter.com/connexionfr">suivez-nous sur twitter</a></td>

              <td width="50" align="right"><a href="https://www.xing.com/net/connexionfrancaise" style="text-decoration:none;"><img src="/images/small-xing.jpg" style="margin-top:3px;"></a></td>
              <td width="3" />
              <td width="202"><a href="https://www.xing.com/net/connexionfrancaise">retrouvez-nous sur Xing</a></td>

              </tr>
              </table>
					  </td>
					</tr>
					<tfoot>
					<tr><td>&nbsp;<td></tr>
					<tr>
						<td class="permission" align="left">
								<p>Vous recevez cet email parce que vous êtes inscrit à notre newsletter.</p>
	              <p>Plus intéressé? <unsubscribe>Désinscription</unsubscribe>.</p>
             </td>
          </tr>
					</tfoot>
				</table>
			</td>					
		</tr>
	</table>
</body>
</html>
